import React, { Component } from "react";
import moment from 'moment';
export default class App extends Component {

  state = {
    timeStr : moment().format('YYYY-MM-DD HH:mm:ss')
  }

  //实例对象添加一个属性
  timer = null;

  render() {
    return (
      <div id="time" style={{ width: '300px', height: '60px', border: 'solid 1px #520', textAlign: 'center', lineHeight: '60px'}}>
        {this.state.timeStr}   
      </div> 
    );
  }

  //组件挂在完成的回调
  componentDidMount(){
    //输出
    console.log('组件完成了挂载~ ~');
    this.timer = setInterval(() => {
      //更新状态
      this.setState({
        timeStr: moment().format('YYYY-MM-DD HH:mm:ss')
      })
    }, 1000);
  }

  //组件卸载完成回调
  componentWillUnmount(){
    console.log('组件将要卸载~~');
    //停止定时器
    clearInterval(this.timer);
  }

  //组件完成更新之后 回调
  componentDidUpdate(){
    console.log('组件完成了更新~~')
  }

}
